<template>
  <van-action-sheet
    :show="showMap"
    @close="close"
    style="padding-top: 30rpx"
    class="sheet"
  >
    <div style="padding: 28rpx" class="flex">
      运单号：
      <div>{{ express?.logisticCode }}</div>
      <icon
        class="icon-small"
        type="cancel"
        size="23"
        color="#999"
        @click.stop="close"
      ></icon>
    </div>
    <scroll-view scroll-y style="height: 60vh" type="list" class="contentMap">
      <template v-if="steps && steps.length > 0">
        <van-steps
          style="box-sizing: border-box"
          :steps="steps"
          :active="active"
          active-color="#3974f6"
          direction="vertical"
        />
      </template>
    </scroll-view>
  </van-action-sheet>
</template>

<script setup lang="ts">
import { queryExpress } from '@/api/user';
import { ref, watch } from 'vue';

const prop = defineProps({
  showMap: {
    type: Boolean,
    default: false,
  },
  orderId: {
    type: String,
    default: false,
  },
});
const emit = defineEmits(['close']);
const close = () => {
  steps.value = [];
  express.value = [];
  emit('close');
};
const steps = ref([] as any);
const express = ref();
const active = ref(0);
const queryExpressFn = async (orderId: string) => {
  const res: any = await queryExpress({
    orderId,
  });
  if (res.success) {
    express.value = res;
    steps.value = express?.value.traces.map((v: any) => {
      v.text = v.acceptStation;
      v.desc = v.acceptTime;
      return v;
    });
    steps?.value?.reverse();
  }
};
watch(
  prop,
  () => {
    if (prop.showMap) {
      queryExpressFn(prop.orderId);
    }
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped>
.sheet {
  .flex {
    align-items: center;
    justify-content: space-between;
    view {
      flex: 1;
      font-weight: 500;
    }
  }
  .contentMap {
    position: relative;
    width: 100%;
    // margin: 28rpx;
    background-color: #f6f6f6;
    z-index: 999;
  }
}
</style>
